<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | Dashboard 3</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- IonIcons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
  <!-- 李磊的css -->
  <link rel="stylesheet" href="lilei.css">
  <!-- 引入ElementUi的css -->
  <link rel="stylesheet" href="plugins/elementUI/index.css">

  
</head>
<!--
`body` tag options:

  Apply one or more of the following classes to to the body tag
  to get the desired effect

  * sidebar-collapse
  * sidebar-mini
-->
<body class="hold-transition sidebar-mini">
<div id="app" class="wrapper">
    <!-- Content Header (Page header) -->
    <nav class="navbar navbar-expand navbar-white navbar-light">
      <ul class="nav nav-tabs">
        <li id="system1" class="dropdown" style="display: none;"><a
           data-toggle="dropdown" href="#"
          style="color: black; font-size: 20px;"> 用户管理 </a>
          </li>
        <li id="system2" class="dropdown"
          style="display: none;"><a
          data-toggle="dropdown" href="#"
          style="color: black; font-size: 20px;"> 角色管理 </a>
        </li>
        <li id="system3" class="dropdown"
          style="display: none;"><a
          data-toggle="dropdown" href="#"
          style="color: black; font-size: 20px;"> 仓库管理 </a>
        </li>
          <li id="system4" class="dropdown"
          style="display: none;"><a
          data-toggle="dropdown" href="#"
          style="color: black; font-size: 20px;"> 导出任务 </a>
        </li>
      </ul>

    </nav>
      <script type="text/javascript">
          function system() {
        document.getElementById("system1").style.display = "none";
        document.getElementById("system2").style.display = "none";
        document.getElementById("system3").style.display = "none";
        document.getElementById("system4").style.display = "none";
        
      }
      function system1() {
        document.getElementById("system1").style.display = "";
        document.getElementById("system2").style.display = "none";
        document.getElementById("system3").style.display = "none";
        document.getElementById("system4").style.display = "none";
        document.getElementById("usercontrol").style.display= "";
      }
      function system2() {
        document.getElementById("system2").style.display = "";
        document.getElementById("system1").style.display = "none";
        document.getElementById("system3").style.display = "none";
        document.getElementById("system4").style.display = "none";
      }
      function system3() {
        document.getElementById("system3").style.display = "";
        document.getElementById("system1").style.display = "none";
        document.getElementById("system2").style.display = "none";
        document.getElementById("system4").style.display = "none";
      }
      function system4() {
        document.getElementById("system4").style.display = "";
        document.getElementById("system1").style.display = "none";
        document.getElementById("system2").style.display = "none";
        document.getElementById("system3").style.display = "none";
      }
      </script>

    <!-- ---------------------局部刷新-------------------------- -->
    <div class="content-header">
      <div id="usercontrol" style="display: '';">
        <div class="row" style="height: 50px;">
          <div class="col-md-2">
            <button id="useradd" class="btn btn-block btn-primary" onclick = "document.getElementById('addrolediv').style.display='block';" style="height: 40px;">新增角色</button>
            <!-- 弹出新增角色对话框 -->
            
            
            <!-- ------------------------------------------------ -->
          </div>
          <div class="col-md-3"></div>
          <div class="col-md-7">
            <div class="btn-group">
              <div class="btn-group" style="margin: 10px;width: 200px;height: 30px;">
                <button type="button" class="btn btn-default" v-on:click="all()" style="line-height: 14px;font-size: 14px;">全部</button>
                <button type="button" class="btn btn-default" v-on:click="on()" style="line-height: 14px;font-size: 14px;">启用</button>
                <button type="button" class="btn btn-default" v-on:click="off()" style="line-height: 14px;font-size: 14px;">禁用</button>
              </div>
              <div class="input-group" style="margin: 5px;width: 380px;">
                <input id="search" type="text" class="form-control" v-model="searchwords" placeholder="请输入角色名或者角色编码关键字">
                <span class="input-group-btn">
                  <button v-on:click="search()" class="btn btn-block btn-primary">
                    搜索
                  </button>
                </span>
                
                <i class="nav-icon fas fa-undo" v-on:click="all()" style="margin: 10px;"></i>
                
              </div>

            </div>

          </div>
        </div>
        
        <div id="information" class="row" style="text-align: center;">
          <table class="table table-condensed" style="border-bottom: 1px solid rgb(216, 216, 216);;">
            <caption></caption>
            <thead>
              <tr>
                <th>序号</th>
                <th>角色名称</th>
                <th>角色编码</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>描述</th>
                <th>操作</th>

              </tr>
            </thead>
            <tbody>
              <tr v-for="(role,key) in roles">
                <td>{{key+1}}</td>
                <td>{{role.rname}}</td>
                <td>{{role.rcode}}</td>
                <td>
                  <el-switch
                    v-model="value"
                    active-color=""
                    inactive-color=""
                    on-text="启动"
                    on-value={{role.status}}
                    off-text="禁止"
                    off-value="0"
                    >
                  </el-switch>
                </td>
                <td>
                  {{role.ctime}}
                </td>
                <td>{{role.description}}</td>
                <td>
                  <i class="nav-icon fas fa-cog" style="margin: 5px;margin-left: 10px;"></i>
                  <span class="partition1"></span>
                  <i class="nav-icon fas fa-edit " style="margin: 5px;margin-left: 10px;"></i>
                  <span class="partition1"></span>
                  <i class="nav-icon fas fa-trash" v-on:click="del(role.rid)" style="margin: 5px;margin-left: 10px;color: red;"></i>
                </td>
            </tr>
            
              
              
            </tbody>
          </table>
          <!-- 分页 -->
          <div class="block" style="margin-top: -20px;">
            <el-pagination
              class="pagination"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              background
              :page-sizes="[12]"
              :page-size="12"
              layout="total, prev, pager, next, sizes, jumper"
              :total="1342">
            </el-pagination>
          </div>
        
        </div>
        
      
      </div>
      
    </div>
    <!-- 新增角色弹窗 -->
    <div id="addrolediv">
      <div style="height: 40px;border-bottom:1px solid rgb(233, 233, 233);">
        <div style="width: 50px;margin-left: 30px;margin-top: 20px;">
          <p style="font-size: 15px;color: rgb(82, 82, 82);"><b>角色</b></p>
        </div>
        <div style="margin-left: 750px;margin-top: -40px;">
          <button class="btn btn-default" onclick = "document.getElementById('addrolediv').style.display='none';" style="height: 30px;line-height: 10px;">x</button>
        </div>
      </div>
      <div style="border-bottom:1px solid rgb(233, 233, 233);">
        <div style="margin-top: 15px;margin-bottom: 20px;">
          <span style="margin-left: 100px;">角色名称：</span>
          <input type="text" style="margin-left: 30px;width:450px;height: 25px;" placeholder="请选择">
        </div>
        <div style="margin-top: 15px;margin-bottom: 20px;">
          <span style="margin-left: 100px;">角色编码：</span>
          <input type="text" style="margin-left: 30px;width:450px;height: 25px;" placeholder="请选择">
        </div>
        
        <div style="margin-top: 10px;margin-bottom: 10px;">
          <span style="margin-left: 100px;">状态：</span>
          <span style="margin-right:70px">
            <input type="radio" name="status" value="启用" style="margin-right:5px">
            启用
          </span>
          <span>
            <input type="radio" name="status" value="禁用" style="margin-right:5px">
            禁用
          </span>
        </div>

        <div style="margin-top: 10px;margin-bottom: 10px;">
          <span style="margin-left: 100px;">菜单权限：</span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            出库管理
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            入库管理
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            分称管理
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            调拨管理
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            物料管理
          </span><br>
          
          <span style="margin-left:183px;margin-right: 5px;">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            物料分类
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            销售管理
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            财务管理
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            货品转换
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            基础数据
          </span><br>

          <span style="margin-left:183px;margin-right: 21px;">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            出库单
          </span>
          <span style="margin-right:21px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            入库单
          </span>
          <span style="margin-right:21px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            选货单
          </span>
          <span style="margin-right:21px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            打保单
          </span>
          <span style="margin-right:21px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            采购单
          </span><br>
        </div> 
        
        <div style="margin-top: 10px;margin-bottom: 10px;">
          <span style="margin-left: 100px;">品类权限：</span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            黄金
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            钻石
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            玛瑙
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            翡翠
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            铂金
          </span><br>
          
          <span style="margin-left:183px;margin-right: 5px;">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            项链
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            戒指
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            手镯
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            耳环
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            鼻环
          </span><br>
        </div>

        <div style="margin-top: 10px;margin-bottom: 10px;"> 
          <span style="margin-left: 100px;">功能权限：</span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            入库新增
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            入库审核
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            入库反审
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            入库导出
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            新增分称
          </span><br>
          
          <span style="margin-left:183px;margin-right: 5px;">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            出库新增
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            出库审核
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            出库反审
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            出库到处
          </span>
          <span style="margin-right:5px">
            <input type="checkbox" name="caidanquanxian" value="0" style="margin-right:5px">
            新增调拨
          </span><br>
          
        </div>
        
      </div>
      <div>
        <div style="margin-left: 600px;margin-top:15px">
          <button class="btn btn-default" onclick = "document.getElementById('addrolediv').style.display='none';" style="width: 70px;height: 30px;line-height: 10px;">确认</button>
          <button class="btn btn-default" onclick = "document.getElementById('addrolediv').style.display='none';" style="width: 70px;height: 30px;line-height: 10px;">取消</button>
        </div>
      </div>
    </div>

    <script>


    </script>

</div>
<!-- ./wrapper -->

<!-- REQUIRED SCRIPTS -->

<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE -->
<script src="dist/js/adminlte.js"></script>

<!-- OPTIONAL SCRIPTS -->
<script src="plugins/chart.js/Chart.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard3.js"></script>
<!-- 引入VUE -->
<script src="plugins/vue-2.6.10/vue-resource.min.js"></script>
<script src="plugins/vue-2.6.10/vue.js"></script>
<!-- 引入axios -->
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<!--引入ElementUi-->
<script src="plugins/elementUI/index.js"></script>
<script>
  $(function(){
       var wer = new Vue({
            el:"#app",
            data() {
              return {
                value: true,
                currentPage4: 100,
                roles:[],
                searchwords:"",
                
              }
            },
            //发送请求查询所有角色信息
            mounted(){
                axios
                    .get('role/all')
                    .then(res=>{
                        console.info(res.data);
                        this.roles=res.data;
                    })
            },

            
            methods: {
                //分页
              handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
              },
              handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
              },
              //全部
              all:function() {
                  axios
                    .get('role/all')
                    .then(res=>{
                        console.info(res.data);
                        this.roles=res.data;
                    })
              },
              //启用
              on:function(){
                  axios
                    .get('role/findrolebystatus?status=1')
                    .then(res=>{
                        console.info(res.data.data);
                        this.roles=res.data.data;
                    })
              },
              //禁用
              off(){
                  axios
                    .get('role/findrolebystatus?status=0')
                    .then(res=>{
                        console.info(res.data.data);
                        this.roles=res.data.data;
                    })
              },
              //模糊搜索
              search(){
                  axios
                    .get('role/findrolebywords?words='+this.searchwords)
                    .then(res=>{
                        console.info(res.data.data);
                        this.roles=res.data.data;
                    })
              },
              //删除
              del(rid){
                  axios
                    .get('role/delbyrid?rid='+rid)
                    .then(res=>{
                        alert('删除角色成功');
                        console.info(res.data.data)
                        this.roles=res.data.data;
                    })
              }
                
              
            }
            
        });
        
    })
   
    


</script>

</body>
</html>
